<template>
	<view class="tongji">
<!-- 		<uni-nav-bar backgroundColor="#0077ff" color="white">
		  
			 <view >统计</view>
		    <view slot="right">
				<image src="../../static/img/time.png" mode=""></image>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"fields="month" style="float: right;font-size: 28upx;">
					<view class="uni-input">{{ date }}</view>
				</picker>
			</view>
		</uni-nav-bar> -->
		
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<uni-nav-bar backgroundColor="#0077ff" color="white" :fixed='true'>
			<view slot="left"></view>
			<view>统计</view>
			<view slot="right" style="display:flex;align-items:center;">
				<image style="width:30upx;height:28upx;margin-right:14upx;" src="../../static/img/time.png" mode=""></image>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"fields="month" style="float: right;font-size: 28upx;">
					<view class="uni-input">{{ date }}</view>
				</picker>
			</view>
		</uni-nav-bar>
		
		
		
			<view class="city" @click="show">
				{{ order_arsName }}
				<uni-icons type="arrowright" size="20" style=" color: #87888a;float: right;"></uni-icons>
				<wyb-popup ref="popup" type="bottom" height="200" width="500" radius="3">
					
					<view class="popup-content">
						<view v-for="(i,indexs) in areaListArr" :class="index==indexs?'popitem popActive':'popitem'" @click="tab(indexs)">
							{{ areaListArr[indexs] }}
							<uni-icons type="checkmarkempty" v-if="index==indexs" size="20" style=" color: #0e7fff;float: right;"></uni-icons>
						</view>
					</view>
				</wyb-popup>
			</view>
			<view class="people">
				<view class="left">共计<text>{{ myTeamData.num }}</text>人</view>
			</view>
			
			
			<!-- <mescroll-body> -->
				<view class="outer">
					<view class="list list1">
						<view class="left">姓名</view>
						<view class="middle">单数</view>
						<view class="right">好评率</view>
					</view>
					<view class="list" v-if="myTeamData.server_list.length != ''" v-for="(item,index) in myTeamData.server_list" :key="index">
						<view class="left">
							<image :src="item.imgurl" mode=""></image>
							<text>{{ item.person_name }}</text>
						</view>
						<view class="middle">{{ item.num }}</view>
						<view class="right">{{ item.hp_rate }}%</view>
						<div class="hr"></div>
					</view>
					
					<view class="null" v-if="myTeamData.server_list.length == ''">
						<image class="null_img" src="../../static/img/null_tj.png" mode=""></image>
						<view>暂无数据</view>
					</view>
				</view>


		<!-- </mescroll-body> -->
	</view>
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	
	import {mapGetters} from 'vuex';
	export default {
		computed: {
			...mapGetters([
			  "userInfo",
			  "isLogin",
			  "token",
              "uid",
			])
    	},
		components: {
			wybPopup,
			uniNavBar
		},
		data() {
			return {
				date: '选择日期',
				index: 0,
				areaListArr:[],
				areaListArr2:[],
				order_regionID:'',
				order_arsName:'',
				myTeamData:{
					server_list:[]
				}
			}
		},
		mounted() {
			this.areaList()
		},
		methods: {
			areaList(){//获取区域列表
				this.$store.dispatch("areaList").then(res=>{
					if(res.code==1){
						console.log(res)
						this.areaListArr = Object.values(res.data.area_list)
						this.areaListArr2 = Object.keys(res.data.area_list)
						this.order_regionID = this.areaListArr2[0]
						this.order_arsName = this.areaListArr[0]
						this.myTeam(this.order_regionID);
					}
				})
			},
			
			
			myTeam(qu_id,data){
				this.$store.dispatch('myTeam',{qu_id:qu_id,time:data}).then(res=>{
					if(res.code==1){
					    console.log(res)
						this.myTeamData = res.data;
						this.$refs.popup.close();
					}else{
						uni.navigateTo({
						   url:'./choiceservice?uid=' + res.data.info.uid
						});
					}
				})
			},
			
			
			tab(e){
				this.index = e
				this.order_regionID = this.areaListArr2[e]
				this.order_arsName = this.areaListArr[e]
				console.log(this.order_regionID)
				this.myTeam(this.order_regionID);
			},
			show() {
				this.$refs.popup.show()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}年${month}月`;
			},
			bindDateChange: function(e) {
				var str = (e.target.value).replace(/-/, "-");
				this.date = str
				this.myTeam(this.order_regionID,this.date);
				
			},
		},
		computed:{
			startDate() {
			    return this.getDate('start');
			},
			endDate() {
			    return this.getDate('end');
			},
		},
		created() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.tongji {
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		.city {

			padding: 0 20upx;
			line-height: 80upx;
			font-size: 28upx;
			background: white;
		}

		.popitem {
			line-height: 70upx;
			padding: 0 10px;
			font-size: 30upx;
		}

		.popActive {
			color: #0e7fff;
		}

		.people {
			padding: 20upx;
			display: flex;
			justify-content: space-between;


			.left {
				color: #a4a8b7;
				font-size: 28upx;
				
				text {
					margin: 0 10upx;
					color: black;
					font-size: 36upx;
					font-weight: 550;
				}
			}


		}

		.outer {
			.null{
				text-align:center;
				margin-top:100upx;
				.null_img{
					width:492upx;
					height:492upx;
				}
				view{font-size:28upx;color:#929292;}
			}
			.list {
				height: 120upx;
				line-height: 120upx;
				display: flex;
				background: white;
				justify-content: space-around;
				text-align: center;
				font-size: 28upx;
				position: relative;

				.left {
					width: 35%;
					text-align: left;
					display:flex;
					image {
						height: 88upx;
						width: 88upx;
						border-radius: 50%;
						float: left;
						margin-top: 16upx;
					}

					text {
						overflow:hidden;
							text-overflow:ellipsis;
							white-space:nowrap;
						margin-left: 16upx;
					}
				}

				.center {
					width: 35%;
				}

				.right {
					width: 30%;
				}

				.hr {
					position: absolute;
					width: 95%;
					height: 2upx;
					bottom: 0upx;
					right: 0;
					background: #eee;
					margin-top: 50px;
				}

			}

			.list1 {
				display: flex;
				height: 60upx;
				line-height: 60upx;
				background: #E1E3ED;
				color: #61667C;

			}
		}

	}
</style>
